1import {useState, useReducer, PropsWithChildren} from 'react';
  2import Box from '@mui/material/Box';
  3import {getSession, useSession} from 'next-auth/react';
  4import TravelColumns from '../../../containers/TravelColumns';
  5import NewTravelDialog from '../../../containers/NewTravelDialog';
  6import VehicleChoiceDialog from '../../../containers/VehicleChoiceDialog';
  7import pageUtils from '../../../lib/pageUtils';
  8import EventLayout, {TabComponent} from '../../../layouts/Event';
  9import {
 10  EventByUuidDocument,
 11  FindUserVehiclesDocument,
 12  VehicleEntity,
 13  useFindUserVehiclesQuery,
 14} from '../../../generated/graphql';
 15
 16interface Props {
 17  eventUUID: string;
 18  announcement?: string;
 19}
 20
 21const Page = (props: PropsWithChildren<Props>) => {
 22  return <EventLayout {...props} Tab={TravelsTab} />;
 23};
 24
 25const TravelsTab: TabComponent<Props> = () => {
 26  const session = useSession();
 27  const [openNewTravelDialog, setNewTravelDialog] = useState(false);
 28  const [openVehicleChoice, toggleVehicleChoice] = useReducer(i => !i, false);
 29  const [selectedVehicle, setSelectedVehicle] = useState<VehicleEntity>();
 30
 31  const isAuthenticated = session.status === 'authenticated';
 32  const {data} = useFindUserVehiclesQuery({
 33    skip: !isAuthenticated,
 34  });
 35  const vehicles = data?.me?.profile?.vehicles?.data || [];
 36
 37  const addTravelClickHandler =
 38    isAuthenticated && vehicles?.length != 0
 39      ? toggleVehicleChoice
 40      : () => setNewTravelDialog(true);
 41
 42  return (
 43    <Box>
 44      <TravelColumns showTravelModal={addTravelClickHandler} />
 45      <NewTravelDialog
 46        key={selectedVehicle?.id || 'noVehicle'}
 47        opened={openNewTravelDialog}
 48        toggle={() => setNewTravelDialog(false)}
 49        selectedVehicle={selectedVehicle}
 50      />
 51      <VehicleChoiceDialog
 52        open={openVehicleChoice}
 53        toggle={toggleVehicleChoice}
 54        setNewTravelDialog={setNewTravelDialog}
 55        setSelectedVehicle={setSelectedVehicle}
 56        vehicles={vehicles}
 57      />
 58    </Box>
 59  );
 60};
 61
 62export const getServerSideProps = pageUtils.getServerSideProps(
 63  async (context, apolloClient) => {
 64    const {uuid} = context.query;
 65    const {host = ''} = context.req.headers;
 66    const session = await getSession(context);
 67    let event = null;
 68
 69    // Fetch event
 70    try {
 71      const {data} = await apolloClient.query({
 72        query: EventByUuidDocument,
 73        variables: {uuid},
 74      });
 75      event = data?.eventByUUID?.data;
 76    } catch (error) {
 77      return {
 78        notFound: true,
 79      };
 80    }
 81
 82    // Fetch user vehicles
 83    if (session)
 84      await apolloClient.query({
 85        query: FindUserVehiclesDocument,
 86      });
 87
 88    return {
 89      props: {
 90        eventUUID: uuid,
 91        metas: {
 92          title: event?.attributes?.name || '',
 93          url: `https://${host}${context.resolvedUrl}`,
 94        },
 95      },
 96    };
 97  }
 98);
 99
100export default Page;